<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <p id="p1" name="zhangsan"></p>
    <p id="p2" class="class1"></p>
    <p id="p3"></p>
    <p id="p4"></p>
    <p id="p5"></p>
</div>
</body>
<script>
    /**获取元素*/
    //根据id获取
    var elementById = document.getElementById("div1");
    console.log(elementById);
    //根据标签名来获取元素
    var elementsByTagName = document.getElementsByTagName("p");
    console.log(elementsByTagName)
    //根据name属性名来进行获取
    var elementsByName = document.getElementsByName("zhangsan");
    console.log(elementsByName);
    //根据class类名来进行获取
    var elementsByClassName = document.getElementsByClassName("class1");
    console.log(elementsByClassName);


    /**es6语法获取DOM元素 */
    // 获取单个属性值
    var element = document.querySelector("#div1");
    console.log(element);
    var htmlParagraphElement = document.querySelector("p");
    console.log(htmlParagraphElement);
    //获取多个属性值
    var nodeListOf = document.querySelectorAll("p");
    console.log(nodeListOf)


   /**查找子节点*/
    /*这里的element是上面定义的#div1*/
    var children = element.children;
    console.log(children);

    //查找第一个子标签
     var firstElementChild = element.firstElementChild;
    console.log(firstElementChild);
    //查找最后一个子标签
    var lastElementChild = element.lastElementChild;
    console.log(lastElementChild);


</script>
</html>